<template>
  <div class="min-h-screen flex flex-col login-bg">
    <!-- Main Content Area -->
    <main class="flex-1 flex items-center justify-center p-8">
      <div class="w-full bg-white rounded-lg shadow-xl overflow-hidden flex desktop-layout">
        <!-- Left Section: Branding/Welcome -->
        <div class="left-section text-white p-12 flex-1 flex flex-col justify-center items-center text-center">
          <h2 class="text-5xl font-extrabold mb-4 animate-fade-in-down">欢迎回来！</h2>
          <p class="text-xl opacity-90 leading-relaxed animate-fade-in-up">
            简化您的会议流程，提升办公效率
          </p>
        </div>

        <!-- Right Section: Login Form -->
        <div class="right-section p-12 flex-1 flex flex-col justify-center">
          <div class="text-center mb-10">
            <h3 class="text-4xl font-bold text-gray-800 mb-2">登录</h3>
            <p class="text-lg text-gray-600">请选择您的角色并登录系统</p>
          </div>

          <!-- Role Tabs -->
          <el-tabs v-model="activeRole" class="mb-8 login-role-tabs" stretch>
            <el-tab-pane name="customer">
              <template #label>
                <div class="flex flex-col items-center py-2">
                  <el-icon><User /></el-icon>
                  <span>客户</span>
                </div>
              </template>
            </el-tab-pane>
            <el-tab-pane name="employee">
              <template #label>
                <div class="flex flex-col items-center py-2">
                  <el-icon><Briefcase /></el-icon>
                  <span>员工</span>
                </div>
              </template>
            </el-tab-pane>
            <el-tab-pane name="admin">
              <template #label>
                <div class="flex flex-col items-center py-2">
                  <el-icon><Setting /></el-icon>
                  <span>管理员</span>
                </div>
              </template>
            </el-tab-pane>
          </el-tabs>

          <!-- Login Form -->
          <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" @submit.prevent="handleLogin" class="space-y-6">
            <el-form-item prop="username">
              <el-input id="username" v-model="loginForm.username" placeholder="请输入账号" size="large" clearable>
                <template #prefix><el-icon><User /></el-icon></template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input id="password" v-model="loginForm.password" type="password" placeholder="请输入密码" show-password size="large" clearable>
                <template #prefix><el-icon><Lock /></el-icon></template>
              </el-input>
            </el-form-item>
            <el-button type="primary" native-type="submit" class="w-full h-14 text-xl font-semibold login-button" :loading="loading">
              登录
            </el-button>
          </el-form>

          <div class="mt-8 text-center text-md text-gray-600">
            <router-link to="/register" class="text-blue-600 hover:underline font-semibold transition-colors duration-200">
              还没有账号？立即注册
            </router-link>
          </div>
        </div>
      </div>
    </main>

    <!-- Footer Section -->
    <footer class="bg-white border-t px-8 py-4 text-center text-sm text-gray-600 shadow-sm">
      © {{ new Date().getFullYear() }} 会议室预订系统 版权所有
    </footer>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useAuthStore } from '@/stores/auth';
import { storeToRefs } from 'pinia';
import { User, Lock, Briefcase, Setting } from '@element-plus/icons-vue';

const router = useRouter();
const loginFormRef = ref(null);
const authStore = useAuthStore();
const { loading } = storeToRefs(authStore);

const activeRole = ref('customer');

const loginForm = ref({
  username: '',
  password: '',
  role: 'Customer'
});

const loginRules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
};

const handleLogin = async () => {
  try {
    const valid = await loginFormRef.value.validate();
    if (!valid) return;

    loginForm.value.role = activeRole.value.charAt(0).toUpperCase() + activeRole.value.slice(1);

    await authStore.login({
      username: loginForm.value.username,
      password: loginForm.value.password,
      role: loginForm.value.role
    });
  } catch (error) {
    // Error is already handled by the auth store
  }
};
</script>

<style scoped>
.login-bg {
  background: linear-gradient(135deg, #e0e7ff 0%, #d1e2ff 100%);
  /* Full page background */
}

.min-h-screen {
  min-height: 100vh;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-1 {
  flex: 1 1 0%;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-2xl {
  border-radius: 1.5rem;
}

.overflow-hidden {
  overflow: hidden;
}

.bg-white {
  background-color: #fff;
}

.text-white {
  color: #fff;
}

.text-center {
  text-align: center;
}

.relative {
  position: relative;
}

/* Header/Footer specific styles */
header, footer {
  background-color: #ffffff;
  border-color: #e2e8f0; /* light gray border */
}

header {
  border-bottom-width: 1px;
}

footer {
  border-top-width: 1px;
}

/* Main content layout for desktop */
.desktop-layout {
  max-width: 1200px; /* A wider max-width for desktop */
  width: 90%; /* Occupy more width */
  min-height: 600px; /* Ensure a decent height */
}

.left-section {
  background: linear-gradient(to top right, #3b82f6, #6366f1);
  padding: 3rem;
  border-radius: 0.5rem 0 0 0.5rem; /* Rounded corners only on left side */
}

.right-section {
  background-color: #ffffff;
  padding: 2.5rem;
}

/* Text sizes and spacing */
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-md { font-size: 1rem; line-height: 1.5rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }

.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }

.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.p-12 { padding: 3rem; }

.w-full { width: 100%; }

/* Element Plus Tabs 样式优化 */
.login-role-tabs :deep(.el-tabs__header) {
  margin-bottom: 0 !important;
}

.login-role-tabs :deep(.el-tabs__nav-wrap::after) {
  height: 0 !important;
}

.login-role-tabs :deep(.el-tabs__item) {
  font-size: 1.15rem;
  padding: 0 1.5rem;
  height: auto;
  line-height: 1.2;
  transition: all 0.3s ease;
  color: #6b7280;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.login-role-tabs :deep(.el-tabs__item.is-active) {
  color: #3b82f6 !important;
  font-weight: 700;
}

.login-role-tabs :deep(.el-tabs__item:hover) {
  color: #3b82f6;
}

.login-role-tabs :deep(.el-tabs__active-bar) {
  background-color: #3b82f6;
  height: 4px;
  border-radius: 2px 2px 0 0;
}

/* Element Plus Input 样式优化 */
.el-form-item {
  margin-bottom: 1.5rem;
}

.el-input :deep(.el-input__inner) {
  border-radius: 0.75rem;
  padding-left: 2.75rem;
  height: 3.5rem;
  font-size: 1rem;
}

.el-input :deep(.el-input__prefix) {
  left: 0.8rem;
  font-size: 1.2rem;
}

/* Element Plus Button 样式优化 */
.login-button {
  border-radius: 0.75rem;
  background-color: #3b82f6;
  border-color: #3b82f6;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.login-button:hover {
  background-color: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.35);
}

/* Animations */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-down { animation: fadeInDown 0.7s ease-out forwards; }
.animate-fade-in-up { animation: fadeInUp 0.7s ease-out forwards; animation-delay: 0.1s; }
</style>
